<template>
<div>
<!--  审批项目  -->
  <el-tree :data="SystemAuthorityData"
           :props="defaultProps"
  >

      <span class="custom-tree-node" slot-scope="{ node , data }">
        <span>{{ node.label }}</span>
        <span v-if="!data.children" style="margin-left: 1000px">

          <el-button
              type="text"
              size="mini"
              @click="() => getFlow(data)">
            当前流程
          </el-button>
          &nbsp;&nbsp;&nbsp;
          <el-button
              type="text"
              size="mini"
              @click="() => append(data)">
            修改
          </el-button>

        </span>
      </span>

  </el-tree>

<!-- 修改流程  -->
  <el-dialog
      title="修改流程"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

    <el-form label-position="top"  :model="FlowNameForm">
      <el-form-item label="流程类型">
        <el-select v-model="FlowNameForm.authorityDesc" placeholder="选择流程类型">
          <el-option v-for="fnd in flowNameData" :key="fnd.id" :value="fnd.id+''" :label="fnd.fname"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateMoKuaiFid">确 定</el-button>
  </span>

  </el-dialog>


  </div>

</template>

<script>
export default {
  name: "ApprovalProject",
  data(){
    return{
      FlowNameForm:{
        id:"",  // 模块id
        authorityDesc:"" // 流程id
      },// 流程名称表单数据
      flowNameData:[], // 流程名称数据
      dialogVisible:false, // 修改流程对话框
      SystemAuthorityData:[], // 存放树形数据
      defaultProps: {
        children: 'children',
        label: 'authorityName',
        isLeaf: 'leaf'
      },
    }
  },
  created() {
    this.querySystemAuthority()
  },
  methods:{
// 查询系统权限

    querySystemAuthority(){

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("systemAuthority")
      .then(res => {

        setTimeout(() => {
          loading.close();
        });
        this.SystemAuthorityData = res.data.data.data
      })
      .catch()

    },
    queryFlowName(){// 查询流程名称下拉框
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("flownames")
        .then(res => {
          setTimeout(() => {
            loading.close();
          });
          this.flowNameData = res.data.data.list
        })
      .catch()
    },
    append(data){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.queryFlowName()
      this.FlowNameForm.id = data.id
      this.$http.get(`systemAuthority/${data.id}`)
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.FlowNameForm.authorityDesc = res.data.data
        // console.log(res.data.data)
        this.dialogVisible=true // 显示修改对话框
      })
      .catch()
    },
    handleClose(done){
      this.$confirm('确认放弃修改审批类型!')
          .then(() => {
            done();
          })
          .catch( () => {});
    },
    updateMoKuaiFid(){// 修改模块fid
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.put("systemAuthority",this.FlowNameForm)
      .then( () => {
        setTimeout(() => {
          loading.close();
        });
        this.$message({
          message: '修改成功!',
          type: 'success'
        });
        this.querySystemAuthority()
            this.dialogVisible = false
      })
      .catch()
    },
    getFlow(data){ // 查看当前流程类型
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get(`flownames/${data.id}`)
          .then(res => {
            setTimeout(() => {
              loading.close();
            });
            const Fname = res.data.data==null||''?"当前模块没有指定流程类型":res.data.data.fname
            this.$notify.info({
              title: data.authorityName+'的流程类型',
              message: Fname
            });


          })
          .catch()


      // this.$notify.info({
      //   title: '当前流程类型',
      //   message: '这是一条消息的提示消息'
      // });
    },
    }




}
</script>



<style scoped>

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.block{
  width: 1000px;
}

</style>